<template>
    <div class="boxContentCss">
        <el-form ref="formRef" :model="form" label-position="right" label-width="auto">
            <EdCreateCard title="巡检详情">
                <template #back>
                    <div class="createBack" @click="$utilsSet.goBack($router)" >
                        <svg-icon icon-class="back" /> 返回
                    </div>
                </template>
                <div class="zh_flex">
                    <div class="left">
                        <div class="left_title">点位巡检详情</div>
                        <div class="left-content" style="border-rigth:1px solid #e5e7eb;">
                            <el-timeline >
                                <el-timeline-item
                                v-for="(activity, index) in form.servePatrolWorkLocationVos"
                                :key="index"
                                :icon="activity.icon"
                                color="#EED096"
                                size="large"
                                >
                                <div style="transform: translateY(-2px)">
                                    {{activity.name}}
                                </div>
                                <div>
                                    {{activity.installationSite}}
                                </div>
                                <!-- 如果要展示多个扫码结果就用如下代码 -->
                                <!-- <div v-for="(item1,index) in activity.statusList :key='index'">
                                    <span v-if="item1.isNormal==0">点位正常</span>
                                    <span v-if="item1.isNormal==1">点位异常</span>
                                </div> -->
                                <div>
                                    <span  style="color:#606266">{{activity.arrivalTime}}</span>
                                    <span v-if="activity.isNormal==0" style="color:#65A9A5;margin-left: 10px;">点位正常</span>
                                    <span v-if="activity.isNormal==1"  style="color:#DBBC81;margin-left: 10px;">点位异常</span>
                                </div>
                                </el-timeline-item>
                            </el-timeline>
                        </div>
                    </div>
                    <div class="right">
                        <div class="right-top">
                            <div class="right-title">任务详情</div>
                            <div class="right-content">
                                <el-row>
                                    <el-col :span="12"><span class="label_text">项目：</span><span class="value_text">{{form.villageName || '-'}}</span></el-col>
                                    <el-col :span="12"><span class="label_text">任务编号：</span><span class="value_text">{{form.patrolNo || '-'}}</span></el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <span class="label_text">状态：</span>
                                        <el-button class="ed-table-bottom  ed_task_bottom" v-if="form.patrolStatus==1">巡检中</el-button>
                                        <el-button class="ed-table-bottom ed_2_border" v-else-if="form.patrolStatus==0">未巡检</el-button>
                                        <el-button class="ed-table-bottom ed_3_border" v-else-if="form.patrolStatus==2">已巡检</el-button>
                                    </el-col>
                                    <el-col :span="12"><span class="label_text">任务名称：</span><span class="value_text">{{form.patrolName || '-'}}</span></el-col>
                                </el-row>
                                <el-row>
                                <el-col :span="12"><span class="label_text">巡检类型：</span>
                                    <span v-if="form.patrolType==0">保安巡检</span>
                                    <span v-else-if="form.patrolType==1">保洁巡检</span>
                                    <span v-else-if="form.patrolType==2">工程巡检</span>
                                    <span v-else-if="form.patrolType==3">绿化巡检</span>
                                    <!-- <span v-else-if="form.patrolType==4">环境绿化巡检</span> -->
                                    <span v-else>-</span>
                                </el-col>
                                    <el-col :span="12"><span class="label_text">责任人：</span><span class="value_text">{{form.personnelName || '-'}}</span></el-col>
                                </el-row>
                                <el-row>
                                <el-col :span="12"><span class="label_text">任务时间：</span><span class="value_text">{{form.startTime || '-'}}至{{form.endTime || '-'}}</span></el-col>
                                <el-col :span="12"><span class="label_text">扫码开始时间：</span><span class="value_text">{{form.scanStartTime || '-'}}</span></el-col>
                                <el-col :span="12"><span class="label_text">扫码结束时间：</span><span class="value_text">{{form.scanEndTime || '-'}}</span></el-col>
                                <el-col :span="12"><span class="label_text">完成情况：</span><span class="value_text">{{form.performance || '-'}}</span></el-col>
                                </el-row>
                            </div>      
                        </div>
                        <div class="right-bottom">
                            <template>
                                <div class="pointStatusPage">
                                    <div class="report">巡检报告</div>
                                    <div class="title">点位状态</div>
                                         <div class="box">
                                            <div class="item" v-for="(item,index) in form.servePatrolWorkLocationVos" :key="index">
                                                <div class="topText">
                                                    <span v-if="item.isNormal==0">正常</span>
                                                    <span v-if="item.isNormal==1">异常</span>
                                                    <!-- {{item.isNormal == 0 ?'正常':'异常'}} -->
                                                </div>
                                                <div class="bgBlue" v-if="item.isNormal==0"></div>
                                                <div class="bgYellow" v-else-if="item.isNormal==1"></div>
                                                <div class="bgwhite" v-else></div>
                                                <div class="bottomText" v-if="item.isNormal==0 || item.isNormal==1">{{item.name}}</div>
                                                <div class="bottomText_1" v-if="item.isNormal!=0 && item.isNormal!=1">{{item.name}}</div>
                                            </div>
                                            <!-- <div v-for="(item,index) in form.servePatrolWorkLocationVos" :key="index">
                                                <div>{{item.name}}</div>
                                            </div> -->
                                        </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
                
            </EdCreateCard>
        </el-form>
        <!-- <AssignDialog :isShow="changeDialog" @close-dialog="handleDialogClose" @save-dialog="handleDialogSave"></AssignDialog> -->
    </div>
</template>

<script>
    import EdCreateCard from 'src/components/EdCreateCard.vue'
    import EdDateTimePicker from 'src/components/EdDateTimePicker.vue'
    import WisdomUploadSingle from "src/components/WisdomUploadSingle.vue";
    import EdSelect from 'src/components/EdSelect.vue'
    import EdDialog from 'src/components/EdDialog.vue';
    // import AssignDialog from './AssignDialog.vue'
    import { defineComponent } from 'vue'
    import { getDetailById } from "./api";
    export default defineComponent({
        name: "companyCreate",
        components: { EdCreateCard, EdDateTimePicker, WisdomUploadSingle, EdSelect, EdDialog},
        data(){
            return{
                form: {
                endTime: "",
                patrolName: "",
                patrolNo: "",
                patrolType: 0,
                performance: "",
                personnelName: "",
                scanStartTime: "",
                servePatrolWorkLocationVos: [],
                startTime: ""  
                },
                reverse: true,
                changeDialog: false,
                dataList: []
            }
        },
        activated(){
            if(this.$route.query.id){
                this.getDetailById();
            }
        },
        deactivated() {
            this.form = {
                endTime: "",
                patrolName: "",
                patrolNo: "",
                patrolType: 0,
                performance: "",
                personnelName: "",
                scanStartTime: "",
                servePatrolWorkLocationVos: [],
                startTime: ""  
                }
            // this.getDetailById();
        },
        methods:{
             getDetailById(){
                getDetailById({patrolNo:this.$route.query.id}).then(response => {
                    if(response.success) {
                        this.form = {...response.data}
                    }
                })
            }, 
            assign(){
                this.changeDialog = true;
            },
            edit(){
                this.$router.push({
                    path: '/property/workorder-add',
                    query: { id: this.$route.query.id }
                })
            },
            handleDialogClose(){
                this.changeDialog = false;
            },
            handleDialogSave(data){
                this.changeDialog = false;
            },
        }
    })
</script>

<style scoped lang="scss">
    :deep .el-form-item{
        .el-form-item__content{
            .el-input{
                 input{
                    width: 230px !important;
                }
            }
        }
    }
    .form_btns{
        display: flex;
        justify-content: flex-end;
        margin-right: 10px;
    }
    :deep .zh_flex{
        padding: 16px !important;
        font-family: 'Noto Sans SC';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 28px;
        display: flex;
        .left{
            // display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 0px 0px 0px 20px;
            width: 30%;
            height: 834px;
            background: #FEFEFD;
            box-shadow: inset -1px 0px 0px #DEE0E6;
            border-radius: 0px;
            .left_title{
                color: #414448;
                font-weight: 500;
                font-size: 16px;
                line-height: 24px;
                margin-bottom: 20px;
            }
        }
        .right{
            padding: 16px !important;
            font-family: 'Noto Sans SC';
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 28px;
            flex: 3;
            .right-top{
      
                .right-title{
                    // padding: 0 40px 5px 20px;
                    color: #414448;
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 24px;
                    margin-bottom: 20px;
                    transform: translate(0px,-13px);
                }
                .right-content{
                }
            }
            .right-bottom{
   
            }
        }
        .el-col{
            padding: 15px 0;
        }
        .label_text{
            color: #606266;
        }
            .value_text{
            color: #414448;
        }
        .pointStatusPage{
            .report{
                color: #414448;
                font-style: normal;
                font-weight: 500;
                font-size: 16px;
                line-height: 24px;
                margin-top: 35px;
            }
            .title{
                font-style: normal;
                font-weight: 400;
                margin-top: 40px;
                font-size: 14px;
                color: #606266;
            }
            .box{
                padding: 50px;
                height: 160px;
                width: 90%;
                margin: 10px 30px;
                border-left: 2px solid #EBECF0;
                border-bottom: 2px solid #EBECF0;
                display: flex;
            .item{
                // width: 50px;
                // border: 1px solid blue;
                display: flex;
                flex-flow: column;
                justify-content: flex-end;
                align-items: center;
                margin-left: 20px;
                margin-bottom: -30px;
                color: #4D4F53;
                .topText{
                    // transform: translateY(20px);
                    font-size: 14px;
                    line-height: 22px;
                    color: #414448;
                    padding-bottom: 10px;
                }
                .bottomText{
                    font-size: 15px;
                    padding-top: 10px;
                    transform: translateY(10px);
                }
                .bottomText_1{
                    font-size: 15px;
                    padding-top: 10px;
                    transform: translateY(22px);
                }
                .bgBlue{
                    width: 10px;
                    height: 120px;
                    background-color: #65A9A5;
                    transform: translateY(6px);
                }
                .bgYellow{
                    width: 10px;
                    height: 120px;
                    background-color: #EED096;
                    transform: translateY(6px);
                }
                .bgwhite{
                    width: 10px;
                    height: 120px;
                    background-color: #fff;
                    transform: translateY(16px);
                }
            }
            }
        }
    }
</style>